.container {
    // padding-bottom: 0.98rem;
    .banner {
        width: 100%;
        height: 3.5rem;
        img {
            width: 100%;
            height: 3.5rem;
        }
    }
    .nav {
        font-size: 0;
        background-color: #fafafa;
        position: relative;
        height: 0.68rem;
        width: 100%;
        > div {
            position: absolute;
            width: 50%;
            left: 0;
            transition: all 0.3s;
            &.active {
                transform:translate(100%)
            }
            &::before {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0.14rem;
                width: 0.4rem;
                height: 0.04rem;
                margin-left: -0.2rem;
                background-color: #ee3a29;
                border-radius: 0.04rem;
                -webkit-border-radius: 0.04rem;
                box-sizing: border-box;
            } 
        }
        span {
            font-family: PingFangSC-Regular;
            padding: 0.14rem 0 0.21rem;
            display: inline-block;
            width: 50%;
            font-size: 0.28rem;
            color: #333333;
            letter-spacing: 0.007rem;
            text-align: center;
            cursor: pointer;
            position: relative;
            z-index: 99;
        }
    }
    .description {
        background-color: #fafafa;
        padding: 0 0.24rem;
        .course-desc-img {
            width: 100%;
            height: auto;
            img {
                width: 100%;
                height: auto;
                vertical-align: top;
            }
        }
        .course-list {
            padding: 0 0.08rem;
            > div {
                margin-bottom: 0.2rem;
                width: 100%;
                height: 2.65rem;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 100%;
                border-radius: 0.1rem;
                overflow: hidden;
                position: relative;
                transition: all 0.3s;
                border: 0.02rem solid transparent;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
                &.active {
                    border: 0.03rem solid #ee3a29;
                    box-shadow: 0 0 0.12rem 0.02rem rgba(223, 223, 223, 0.5);
                    box-sizing: border-box;
                    background-size: 105%;
                }
                .apply-num {
                    position: absolute;
                    bottom: 0.15rem;
                    right: 0.12rem;
                    width: 1.7rem;
                    height: 0.38rem;
                    background: rgba(51,51,51,0.40);
                    border-radius: 0.1rem;
                    > div {
                        font-size: 0;
                        text-align: center;
                        span {
                            display: inline-block;
                            font-family: PingFangSC-Light;
                            font-size: 0.26rem;
                            color: #FFFFFF;
                            line-height: 0.38rem;
                            letter-spacing: 0.0057rem;
                        }
                        span.num {
                            padding: 0 0.12rem;
                            display: inline-block;
                            font-family: DINCondensed-Bold;
                            font-size: 0.28rem;
                            color: #ee3a29;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.98rem;
        background: #ffffff;
        box-shadow: 0 -1px 0.1rem 0 #eeeeee;
        font-size: 0;

        > div {
            vertical-align: middle;
        }
        .service {
            margin-left: 0.24rem;
            width: 1.55rem;
            height: 100%;
            position: relative;
            z-index: 99;
            button {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                z-index: 99;
                background-color: transparent;
                border: none;
                border-color: transparent;
                outline: 0;
                &::after {
                    border: 0;
                }
            }
            > span {
                display: inline-block;
            }
            span.item {
                font-family: PingFangSC-Light;
                line-height: 0.98rem;
                display: table-cell;
                font-size: 0.26rem;
                color: #333333;
                letter-spacing: 0.0057rem;
                img {
                    margin-top: -0.02rem;
                    margin-right: 0.08rem;
                    display: inline-block;
                    // line-height: 98rpx;
                    vertical-align: middle;
                    width: 0.33rem;
                }
            }
        }
        .text {
            font-family: PingFangSC-Light;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 0.26rem;
            color: #333333;
            letter-spacing: 0.0057rem;
            line-height: 0.98rem;
        }
        .join-btn {
            position: absolute;
            top: 0;
            right: 0.24rem;
            top: 50%;
            width: 2.2rem;
            height: 0.6rem;
            margin-top: -0.3rem;
            span,
            button {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            span {
                background-image: linear-gradient(
                    -90deg,
                    #feb692 0%,
                    #f77879 100%
                );
                font-family: PingFangSC-Regular;
                border-radius: 0.3rem;
                font-size: 0.28rem;
                color: #ffffff;
                letter-spacing: 0.007rem;
                text-align: center;
                line-height: 0.6rem;
            }
            button {
                background-color: transparent;
                z-index: 99;
                &::after {
                    border: 0;
                }
            }
        }
    }
    .fixed-tab {
        position: fixed;
        right: 0.32rem;
        bottom: 1.3rem;
        width: 0.82rem;
        > .tab-item {
            display: block;
            border-radius: 50%;
            img {
                vertical-align: top;
                display: block;
                width: 0.82rem;
                height: 0.82rem;
            }
            &:last-child {
                margin-top: 0.2rem;
            }
        }
    }
}
.footer-tab {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.98rem;
    background: #FFFFFF;
    box-shadow: 0 -1px 0.1rem 0 #EEEEEE;
    font-size: 0;
    > .item {
        display: inline-block;
        width: 33.333%;
        text-align: center;
        > .item-name {
            font-family: PingFangSC-Regular;
            font-size: 0.2rem;
            letter-spacing: 0.0055rem;
            color: #666666;
            &.active {
                color: #EE3A29;
            }
        }
        > .item-icon {
            margin: 0.11rem auto 0;
            display: block;
            width: 0.56rem;
            height: 0.56rem;
            background-color: #fff;
            img {
                display: block;
                vertical-align: middle;
                // width: 100%;
                width: 0.56rem;
                height: 0.54rem;
            }
        }
    }
}
.music-score {
    padding-bottom: 0.98rem;
}
.qr_code {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99;
    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.70);
    }
    .code {
        position: absolute;
        left: 50%;
        bottom: 1.18rem;
        margin-left: -3rem;
        margin-top: -3.9rem;
        width: 6rem;
        height: 7rem;
        background-color: #fff;
        border-radius: 0.1rem;
        p {
            font-family: PingFangSC-Medium;
            font-size: 0.36rem;
            color: #333333;
            text-align: center;
            line-height: 0.5rem;
        }
        p:nth-of-type(1) {
            padding-top: 0.123rem;
        }
        p:nth-of-type(2) {
            padding-bottom: 0.07rem;
        }
        span {
            position: absolute;
            top: 0.28rem;
            right: 0.28rem;
            width: 0.32rem;
            height: 0.32rem;
            display: block;
            img {
                display: block;
                width: 0.32rem;
                height: 0.32rem;
            }
        }
        div {
            text-align: center;
            img {
                margin: 0 auto;
                display: block;
                width: 4.3rem;
                height: 4.3rem;
            }
        }
    }
}